<template>
  <vue-draggable-resizable class="user-search" :w="550" :h="400" :z="2001" :resizable="false">
    <el-card
      class="user-search-card"
      shadow="always"
      :header-style="{padding: '10px'}"
      :body-style="{padding: '20px 10px'}"
    >
      <div slot="header" class="card-header">
        <span>高级搜索</span>
        <div style="float:right; padding:3px 0">
          <el-button
            v-if="bodyVisible"
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-upload2"
          >折叠</el-button>

          <el-button
            v-else
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-download"
          >展开</el-button>

          <el-button style="padding:0" type="text" @click="onClose()">关闭搜索</el-button>
        </div>
      </div>

      <div class="search-body">
        <div v-show="bodyVisible">
          <el-form :model="searchForm" ref="searchForm" label-width="70px">
            <el-row>
              <el-col :span="11">
                <el-form-item label="姓名" prop="realname">
                  <el-input v-model="searchForm.realname" placeholder="姓名" />
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="性别" prop="gender">
                  <el-select
                    filterable
                    v-model="searchForm.gender"
                    placeholder="请选择性别"
                    clearable
                    style="width:100%"
                  >
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="部门" prop="deptId">
                  <el-cascader
                    clearable
                    filterable
                    :options="formProps.deptTree"
                    v-model="searchForm.deptIds"
                    :props="{
                          label: 'name',
                          value: 'id',
                          checkStrictly: true
                        }"
                    style="width:100%"
                  >
                    <template slot-scope="{node, data}">
                      <span>{{ data.name }}</span>
                    </template>
                  </el-cascader>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="工种" prop="craftName">
                  <el-select
                    filterable
                    v-model="searchForm.craftName"
                    placeholder="请选择工种"
                    clearable
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in formProps.craftList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="职称" prop="professionalTitle">
                  <el-select
                    filterable
                    v-model="searchForm.professionalTitle"
                    placeholder="请选择职称"
                    clearable
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in formProps.professionalTitleList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="政治面貌" prop="politicCountenance">
                  <el-select
                    filterable
                    v-model="searchForm.politicCountenance"
                    placeholder="请选择政治面貌"
                    clearable
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in formProps.politicCountenanceList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="学历" prop="education">
                  <el-select
                    filterable
                    v-model="searchForm.education"
                    placeholder="请选择学历"
                    clearable
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in formProps.educationList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="职务" prop="duty">
                  <el-select
                    filterable
                    v-model="searchForm.duty"
                    placeholder="请选择职务"
                    clearable
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in formProps.dutyList"
                      :key="item.id"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="身份证" prop="identityCard">
                  <el-input v-model="searchForm.identityCard" placeholder="身份证" />
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="手机号" prop="mobile">
                  <el-input v-model="searchForm.mobile" placeholder="手机号码" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="年龄">
                  <el-input v-model="searchForm.age" placeholder="年龄以下" />
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="员工编号">
                  <el-input v-model="searchForm.jobNumber" placeholder="员工编号" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="doSearch()">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </vue-draggable-resizable>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
  name: 'userSearch',
  components: {
    VueDraggableResizable
  },
  data() {
    return {
      visible: false,
      bodyVisible: true,
      searchForm: {
        realname: '',
        deptId: null,
        deptIds: [],
        gender: null,
        craftName: '',
        professionalTitle: '',
        politicCountenance: '',
        education: '',
        identityCard: '',
        mobile: '',
        age: null,
        duty: '',
        jobNumber: ''
      }
    }
  },
  methods: {
    toggleBody() {
      this.bodyVisible = !this.bodyVisible
    },
    async doSearch() {
      this.$emit('onSearch', this.searchForm)
    },
    onClose() {
      this.$emit('onClose')
    }
  },
  watch: {
    'searchForm.deptIds'(val) {
      if (val && val.length > 0) {
        this.searchForm.deptId = val[val.length - 1]
      } else {
        this.searchForm.deptId = null
      }
    }
  },
  computed: {
    formProps() {
      return {
        deptTree: this.$store.getters['user/deptTree'],
        professionalTitleList: this.$store.getters['user/professionalTitleList'],
        educationList: this.$store.getters['user/educationList'],
        dutyList: this.$store.getters['user/dutyList'],
        politicCountenanceList: this.$store.getters['user/politicCountenanceList'],
        craftList: this.$store.getters['user/craftList']
      }
    }
  },
  created() {
    this.$store.dispatch('user/loadCraftList')
  }
}
</script>

<style scoped>
.user-search {
  position: absolute;
  border: none;
}
.user-search > .user-search-card > .el-card__header > .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
